<template>
  <div class="content">
    <div class="header">
      <div class="header_l"></div>
      <div class="header_m"></div>
      <div class="header_r">
        <div class="h-r-timer">
          <span>{{ timerInfo1 }}</span>
          <span>{{ timerInfo2 }}</span>
          <span>{{ timerInfo3 }}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 左侧 -->
      <div class="main_l">
        <div class="item mainl1">
          <div class="bg">
            <span class="title">人员信息</span>
          </div>
          <div class="info">
            <div class="person flex">
              <div class="newWork flex">
                <img src="../../assets/img/main/icon.png" alt="" srcset="" />
                <div class="personItem">
                  <div class="personNum">
                    <div class="num">{{ ondutyInfo.newfactory }}</div>
                    <div class="pice">(人)</div>
                  </div>
                  <div class="personTxt">新厂区到岗人数</div>
                </div>
              </div>
              <div class="newWork oldWork flex">
                <img src="../../assets/img/main/icon.png" alt="" srcset="" />
                <div class="personItem">
                  <div class="personNum">
                    <div class="num">{{ ondutyInfo.oldfactory }}</div>
                    <div class="pice">(人)</div>
                  </div>
                  <div class="personTxt">老厂区到岗人数</div>
                </div>
              </div>
            </div>
            <div class="reportduty flex">
              <div class="title">今日厂区到岗人数及占比</div>
              <div class="upload-box">
                <!-- <img src="../../assets/img/main/downLoad.png" alt="" srcset=""> -->
              </div>
            </div>
            <div class="rolschart">
              <v-chart autoresize :option="stateData.option1"></v-chart>
            </div>
          </div>
        </div>
        <div class="item mainl2">
          <div class="bg">
            <span class="title">访客信息</span>
          </div>
          <div class="info">
            <div class="tableConent">
              <ul class="tab-head">
                <li>访客姓名</li>
                <li>访客对象</li>
                <li>所属单位</li>
                <li>来访时间</li>
                <li>车牌号</li>
              </ul>
              <div class="swiper tableBoxLeft">
                <div class="swiper-wrapper">
                  <div class="swiper-slide flex" v-for="(i, index) in vistorlist" :key="index" :class="(index + 1) % 2 != 0 ? 'slidA' : ''">
                    <div class="item">{{ i.personName }}</div>
                    <div class="item">{{ i.isv_name }}</div>
                    <div class="item">{{ i.dw }}</div>
                    <div class="item">{{ i.time }}</div>
                    <div class="item">{{ i.plate }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="timeBox">
              <div class="leftTime">
                <el-config-provider :locale="zhcn">
                  <el-date-picker :clearable="true" @change="getVistorlistInfo" placeholder="请选择时间" v-model="visitorTime" prefix-icon="" type="month" format="YYYY-MM" value-format="YYYY-MM" show-calendar="false">
                  </el-date-picker>
                </el-config-provider>
              </div>
              <div class="rightLoad" @click="visitorDownLoad">下载报表</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main_m">
        <div class="item mainr1 flex">
          <div class="top-title-box" :class="index == flagStr.top1Flag ? 'top-title-box-A' : ''" v-for="(item, index) in centerState.topTitle" :key="index" @click="handleActive(index, 'top1Flag', item)">
            {{ item.name }}
          </div>
        </div>
        <div class="item mainr2 flex">
          <div class="info">
            <!-- 上部样式 60% -->
            <div class="bottom-bg">
              <div class="iconBox1" v-for="(item, index) in stateData.centerList" :key="index" :class="'iconBox' + (index + 1)">
                <img :src="getAssetsFile(`center-icon${index+1}` + '.png')" alt="" srcset="" />
                <div class="detail1">
                  <div class="numBox" :class="
                      item.status == 'ping'
                        ? 'ping'
                        : item.status == 'reduce'
                        ? 'numBox'
                        : 'red'
                    ">
                    <span class="num">{{ item.all }}</span>
                    <img :src="
                        getAssetsFile(
                          (item.status == 'ping'
                            ? 'ping'
                            : item.status == 'reduce'
                            ? 'down'
                            : 'up') + '.png'
                        )
                      " alt="" srcset="" />
                    <span class="num2">{{ item.num }}</span>
                  </div>
                  <div class="txtBox">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <!-- <div class="iconBox1" :class="'iconBox2'">
                <img src="../../assets/img/main/center-icon1.png" alt="" srcset="">
                <div class="detail1 detail2">
                  <div class="numBox" :class="'ping'">
                    <span class="num">89</span>
                    <img src="../../assets/img/main/center-icon2.png" alt="" srcset="">
                    <span class="num2">0</span>
                  </div>
                  <div class="txtBox">
                    区域闯入
                  </div>
                </div>
              </div> -->
            </div>
            <!-- 下部样式40% -->
            <div class="alarm-safety flex">
              <div class="alarmBox">
                <div class="navBox">
                  <div class="left">
                    <img src="../../assets/img/main/titleIcon.png" alt="" srcset="" />
                    <span>告警数据</span>
                  </div>
                  <div class="right">
                    <div class="navItem" :class="item.name === flagStr.flagNav ? 'navItemA' : ''" v-for="(item, index) in stateData.selectNav" :key="index" @click="handleActive(item.name, 'flagNav',index)">
                      {{ item.name }}
                    </div>
                  </div>
                </div>
                <div class="echartsBox">
                  <v-chart autoresize :option="stateData.option3"></v-chart>
                </div>
              </div>
              <div class="safetyBox">
                <div class="navBox">
                  <div class="left">
                    <img src="../../assets/img/main/titleIcon.png" alt="" srcset="" />
                    <span>安防设备详情</span>
                  </div>
                </div>
                <div class="safety-content flex">
                  <div class="safety-left">
                    <div class="safety-leftItem" v-for="(item, index) in stateData.safetyList1" :key="index">
                      <img :src="
                          getAssetsFile(
                            'center-anVideo-' + item.status + '.png'
                          )
                        " alt="" srcset="" />
                      <div class="itemR">
                        <div class="numBox" :class="
                            item.status == 'g'
                              ? 'green'
                              : item.status == 'y'
                              ? 'yellow'
                              : 'red'
                          ">
                          <div class="num">{{ item.num }}</div>
                          <div class="bai" v-if="item.pic == '%'">%</div>
                          <div class="pice" v-else>{{ item.pic }}</div>
                        </div>
                        <div class="itemName">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="safety-left">
                    <div class="safety-leftItem" v-for="(item, index) in stateData.safetyList2" :key="index">
                      <img :src="
                          getAssetsFile(
                            'center-roomVideo-' + item.status + '.png'
                          )
                        " alt="" srcset="" />
                      <div class="itemR">
                        <div class="numBox" :class="
                            item.status == 'g'
                              ? 'green'
                              : item.status == 'y'
                              ? 'yellow'
                              : 'red'
                          ">
                          <div class="num">{{ item.num }}</div>
                          <div class="bai" v-if="item.pic == '%'">%</div>
                          <div class="pice" v-else>{{ item.pic }}</div>
                        </div>
                        <div class="itemName">
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item mainr3 flex">
          <div class="info">
            <div class="navBox">
              <div class="left">
                <img src="../../assets/img/main/titleIcon.png" alt="" srcset="" />
                <span>近七日告警类型统计</span>
              </div>
            </div>
            <div class="dayEcharts">
              <v-chart autoresize :option="stateData.option2"></v-chart>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="main_r">
        <div class="item mainr1">
          <div class="bg">
            <span class="title">告警信息</span>
          </div>
          <div class="info">
            <div class="infoBox">
              <div class="infoTable">
                <ul class="tab-head">
                  <li>
                    <el-select v-model="selectAlaram.type" placeholder="告警类型" size="small" @change="getAlarms">
                      <el-option v-for="(item, index) in stateData.optionsSelect" :key="index" :label="item.name" :value="item.value" />
                    </el-select>
                    <!-- 告警类型 -->
                  </li>
                  <li>告警位置</li>
                  <li>告警内容</li>
                  <li>告警时间</li>
                  <li>状态</li>
                  <li>告警详情</li>
                </ul>
                <div class="swiper tableBox">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in leftSwiper1" :key="index" :class="(index + 1) % 2 == 0 ? 'slidA' : ''">
                      <div class="item">{{ item?.type }}</div>
                      <div class="item">{{ item?.position }}</div>
                      <div class="item">{{ item?.content }}</div>
                      <div class="item">{{ item?.time }}</div>
                      <div class="item" :class="'red'">
                        {{ item.alarm_status == 1 ? '已处理' : '未处理' }}
                      </div>
                      <div class="item">
                        <el-image v-if="item.image" style="width: 100%; height: 100%" :src="item?.image" :preview-src-list="[`${item?.image}`]" preview-teleported />
                        <span v-else>无</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="timeBox">
                <div class="leftTime">
                  <el-config-provider :locale="zhcn">
                    <el-date-picker :clearable="true" v-model="selectAlaram.time" placeholder="请选择时间" @change="getAlarms" prefix-icon="" type="month" format="YYYY-MM" value-format="YYYY-MM" show-calendar="false">
                    </el-date-picker>
                  </el-config-provider>
                </div>
                <div class="rightLoad" @click="alarmdownload">下载报表</div>
              </div>
            </div>
          </div>
        </div>
        <div class="item mainr2">
          <div class="bg">
            <span class="title">会议信息</span>
          </div>
          <div class="info">
            <div class="infoBox">
              <div class="infoTable">
                <ul class="tab-head">
                  <li>会议名称</li>
                  <li>会议时间</li>
                  <li>会议室</li>
                  <li>会议状态</li>
                </ul>
                <div class="swiper tableBoxRight">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(i, index) in meetingList" :key="index" :class="(index + 1) % 2 == 0 ? 'slidA' : ''">
                      <div class="item">{{ i.name }}</div>
                      <div class="item">{{ i.time }}</div>
                      <div class="item">{{ i.room }}</div>
                      <div class="item" :class="(index + 1) % 2 == 0 ? 'red' : 'green'">
                        {{ i.status }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="timeBox">
                <div class="leftTime">
                  <el-config-provider :locale="zhcn">
                    <el-date-picker :clearable="true" v-model="meetTime" @change="getMeetinglistInfo" placeholder="请选择时间" prefix-icon="" type="month" format="YYYY-MM" value-format="YYYY-MM" show-calendar="false">
                    </el-date-picker>
                  </el-config-provider>
                </div>
                <div class="right flex">
                  <div class="rightLoad" @click="isIfream = true">创建会议</div>
                  <div class="rightLoad" style="margin-left: 10px" @click="meetingdownload">
                    下载报表
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div class="ifreamBox" v-if="isIfream">
      <div class="item">
        <div class="title">
          <span>创建会议</span>
          <div class="close" @click="closeIfreamBox"></div>
        </div>
        <div class="ifreamBox-content">
          <div class="left">会议信息</div>
          <div class="right">
            <el-form style="max-width: 600px" ref="ruleFormRef" :model="sizeForm" size="small" label-width="auto" label-position="top">
              <el-form-item label="会议名称">
                <el-input v-model="sizeForm.subject" placeholder="请输入会议名称" />
              </el-form-item>
              <el-col :span="24">
                <el-form-item label="会议时间">
                  <el-config-provider :locale="zhcn">
                    <el-date-picker v-model="sizeForm.date" type="datetimerange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 100%" popper-class="half-size-date-picker" />
                  </el-config-provider>
                </el-form-item>
              </el-col>
              <el-col class="text-center" :span="1"></el-col>
              <el-col :span="24">
                <el-form-item label="会议室">
                  <el-select v-model="sizeForm.room" placeholder="选择会议室" size="small" style="width: 100%; height: 100%">
                    <el-option v-for="item in meetingInfo" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-form-item>
                <div class="btnGrop">
                  <div class="submit" @click="createMeeting">创建会议</div>
                  <div class="close" @click="closeIfreamBox">取消</div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  alarms,
  getOnduty,
  getDeponduty,
  getVistorlist,
  getAlarmtypecount,
  getAlarmtypecount7,
  setCreatemeeting,
  getAlarmdownload,
  getMeetingdownload,
  getVistorlistdownload,
  getMeetinglist,
  getmeetingroom,
  getDevicestatus,
} from "../../api/Home";
import Home from "@/Hooks/Home";
import zhcn from "element-plus/es/locale/lang/zh-cn";
import CountUp from "vue-countup-v3";
import { ElMessage } from "element-plus";
import Center from "@/Hooks/center";
import Swiper from "swiper"; // 引入库
import "swiper/css/swiper.css"; // 引入样式文件 注意5和6版本的样式文件不一致
import { reactive, onMounted, ref, markRaw, nextTick } from "vue";
const { state } = Home();
const { centerState } = Center();
let stateData = reactive(state);
const jumpTOFun = (i, index) => {
  jumpToDefault.value = index;
  window.open(i.url);
};
const sizeForm = reactive({
  subject: "",
  date: [],
  room: "",
});
const timerInfo1 = ref("");
const timerInfo2 = ref("");
const timerInfo3 = ref("");
const selectAlaram = reactive({
  type: "",
  time: "",
  // time: new Date().toISOString().slice(0, 7),
});
const meetTime = ref(new Date().toISOString().slice(0, 7)); // 会议时间
const visitorTime = ref(new Date().toISOString().slice(0, 7)); // 访客时间
onMounted(() => {
  getmeetingroomInfo(); // 会议室下拉框信息
  getMeetinglistInfo(); // 会议信息列表
  getOndutyInfo(); //人员信息
  getdepondutyInfo(); // 在岗信息echarts
  getVistorlistInfo(); // 访客列表
  getAlarms(); // 告警列表
  getDevicestatusInfo(); //安防设备详情
  getAlarmtypecount7Info();
  getAlarmMonthInfo();
  getAlarmtypecountInfo();
  refresh();
  getTimer();
  setInterval(() => {
    getTimer();
  }, 100);
});
// 定时刷新任务
const refresh = () => {};
// 近7日图表数据
let flagStr = reactive({
  mySwiper: null,
  mySwiperLeft: null,
  mySwiperRight: null,
  top1Flag: 0,
  flagNav: "年度",
});
// 右侧轮播图（告警）
const getAlarmtypecount7Info = async () => {
  const res = await getAlarmtypecount7();
  if (res.data.code == 0) {
    const { name, date, data1, data2, data3, data4, data5, data6 } =
      res.data.result;
    stateData.option2.xAxis[0].data = date; // x轴时间
    stateData.option2.series[0].name = name[0];
    stateData.option2.series[0].data = data1;
    stateData.option2.series[1].name = name[1];
    stateData.option2.series[1].data = data2;
    stateData.option2.series[2].name = name[2];
    stateData.option2.series[2].data = data3;
    stateData.option2.series[3].name = name[3];
    stateData.option2.series[3].data = data4;
    stateData.option2.series[4].name = name[4];
    stateData.option2.series[4].data = data5;
    stateData.option2.series[5].name = name[5];
    stateData.option2.series[5].data = data6;
  }
};
// 上面header数据
const getAlarmMonthInfo = async () => {
  const res = await getAlarmtypecount(1);
  if (res.data.code == 0) {
    const { result } = res.data;
    const data = result;

    const firstValues = Object.values(data).map(([first, second]) => first);
    const maxfirst = Math.max(...firstValues);
    const dataArr = Object.keys(data).map((key) => {
      const [first, second] = data[key];
      const absDifference = Math.abs(first - second);
      return {
        name: key,
        status: first > second ? "add" : first < second ? "reduce" : "ping",
        all: first,
        num: absDifference,
      };
    });
    const theDataAbove = dataArr.filter((item) => {
      return item.name !== "其他";
    });
    stateData.centerList = theDataAbove;
    console.log("theDataAbove:", theDataAbove);
  }
};
// 上面header数据
const getAlarmtypecountInfo = async (type = 3) => {
  const res = await getAlarmtypecount(type);
  if (res.data.code == 0) {
    const { result } = res.data;
    const data = result;
    // const data = {
    //   区域: [158, 73],
    //   设备: [6, 1549],
    //   工服: [163, 64],
    //   车辆: [3, 0],
    //   消防: [7, 7],
    //   其他: [0, 0],
    // };
    const firstValues = Object.values(data).map(([first, second]) => first);
    const maxfirst = Math.max(...firstValues);
    const dataArr = Object.keys(data).map((key) => {
      const [first, second] = data[key];
      const absDifference = Math.abs(first - second);
      return {
        name: key,
        type: first > second ? ">" : first < second ? "<" : "=",
        first: first,
        second: second,
        absDifference: absDifference,
        maxfirst: maxfirst,
      };
    });
    stateData.option3.yAxis[0].data = dataArr.map((item) => item.name);
    stateData.option3.yAxis[1].data = dataArr.map((item) => item.first);
    stateData.option3.series[0].data = dataArr.map((item) => item.first);
    stateData.option3.series[1].data = dataArr.map((item) => item.maxfirst);
  }
};
// 获取告警信息列表
let leftSwiper1 = reactive([]);
const getAlarms = async () => {
  flagStr.mySwiper?.autoplay.stop();
  leftSwiper1 = [];
  flagStr.mySwiper = null;
  let params = {
    type: selectAlaram.type > 0 ? selectAlaram.type : 0,
    month: selectAlaram.time,
  };
  const res = await alarms(params);
  if (res.data.code == 0) {
    leftSwiper1 = res.data.data.data;
    setTimeout(() => {
      SwiperInit();
    }, 1000);
  }
};
// 访客信息
let vistorlist = reactive([]);
const getVistorlistInfo = async () => {
  flagStr.mySwiperLeft?.autoplay.stop();
  vistorlist = [];
  flagStr.mySwiperLeft = null;
  const res = await getVistorlist(visitorTime.value);
  if (res.data.code == 0) {
    vistorlist = res.data.data;
    setTimeout(() => {
      SwiperInitLeft();
    }, 1000);
  }
};
// 获取assets/IMAGE静态资源
const getAssetsFile = (url) => {
  return new URL(`../../assets/img/main/${url}`, import.meta.url).href;
};

// SwiperInitLeft - 访客系统
const SwiperInitLeft = () => {
  flagStr.mySwiperLeft = new Swiper(".tableBoxLeft", {
    direction: "vertical",
    slidesPerView: 4, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }); // 鼠标移入事件
  var swiperContainer = document.querySelector(".tableBox");
  swiperContainer.addEventListener("mouseenter", function () {
    flagStr.mySwiperLeft?.autoplay.stop(); // 鼠标移入时停止自动播放
  }); // 鼠标移出事件

  swiperContainer.addEventListener("mouseleave", function () {
    flagStr.mySwiperLeft?.autoplay.start(); // 鼠标移出时开始自动播放
  }); // 监听鼠标滚轮事件
};
// Swiper - 智慧告警
const SwiperInit = () => {
  flagStr.mySwiper = new Swiper(".tableBox", {
    direction: "vertical",
    slidesPerView: 5, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }); // 鼠标移入事件
  var swiperContainer = document.querySelector(".tableBox");
  swiperContainer.addEventListener("mouseenter", function () {
    flagStr.mySwiper?.autoplay.stop(); // 鼠标移入时停止自动播放
  }); // 鼠标移出事件

  swiperContainer.addEventListener("mouseleave", function () {
    flagStr.mySwiper?.autoplay.start(); // 鼠标移出时开始自动播放
  }); // 监听鼠标滚轮事件
};
// SwiperRight - 会议信息
const SwiperInitRight = () => {
  flagStr.mySwiperRight = new Swiper(".tableBoxRight", {
    direction: "vertical",
    slidesPerView: 6, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }); // 鼠标移入事件
  var swiperContainer = document.querySelector(".tableBoxRight");
  swiperContainer.addEventListener("mouseenter", function () {
    flagStr.mySwiperRight?.autoplay.stop(); // 鼠标移入时停止自动播放
  }); // 鼠标移出事件

  swiperContainer.addEventListener("mouseleave", function () {
    flagStr.mySwiperRight?.autoplay.start(); // 鼠标移出时开始自动播放
  }); // 监听鼠标滚轮事件
};
// 点击切换存index
const handleActive = (index, str, item) => {
  flagStr[str] = index;
  if (str == "top1Flag") {
    if (item.url) {
      window.open(item.url);
    }
  }
  if (str == "flagNav") {
    getAlarmtypecountInfo(item + 1);
  }
};
// 获取实时时间
const getTimer = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = padZero(now.getMonth() + 1); // 月份是从0开始的
  const day = padZero(now.getDate());
  const hours = padZero(now.getHours());
  const minutes = padZero(now.getMinutes());
  const seconds = padZero(now.getSeconds());
  const dayOfWeek = now.getDay();
  const dayNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const timerLe = `${year}-${month}-${day}`;
  const timerCe = `${dayNames[dayOfWeek]}`;
  const timerRi = ` ${hours}:${minutes}:${seconds}`;
  timerInfo1.value = timerLe;
  timerInfo2.value = timerCe;
  timerInfo3.value = timerRi;
};
const padZero = (number) => {
  return number < 10 ? "0" + number : number.toString();
};
// 人员信息
let ondutyInfo = reactive({});
const getOndutyInfo = async () => {
  const res = await getOnduty();
  if (res.data.code == 0) {
    ondutyInfo = res.data.data;
  }
};
// 今日厂区到岗人数及占比
const getdepondutyInfo = async () => {
  const res = await getDeponduty();
  if (res.data.code == 0) {
    let originalObj = res.data.data;
    // let originalObj = {
    //   车间: 163,
    //   加工: 181,
    //   行政运营: 34,
    //   设备管理: 59,
    //   技术研发: 15,
    // };
    const newArray = Object.keys(originalObj).map((key) => ({
      name: key,
      value: originalObj[key],
    }));
    stateData.option1.series.data = newArray;
    // 计算总数
    const totalValue = newArray.reduce((accumulator, currentObject) => {
      return accumulator + currentObject.value;
    }, 0);
    stateData.option1.title[0].text = `{c|在岗人数}\n{d|${totalValue}}{a|(人)}`;
  }
};

// 访客列表下载
const visitorDownLoad = async () => {
  const res = await getVistorlistdownload(visitorTime.value);
  downLoad(res.data, "访客报表");
};
// 告警列表下载
const alarmdownload = async () => {
  const res = await getAlarmdownload(selectAlaram.time);
  downLoad(res.data, "告警报表");
};
// 会议列表下载
const meetingdownload = async () => {
  const res = await getMeetingdownload(meetTime.value);
  downLoad(res.data, "会议报表");
};
// 封装下载
const downLoad = (content, fileName) => {
  const blob = new Blob([content]);
  if ("download" in document.createElement("a")) {
    const elink = document.createElement("a");
    elink.download = `${fileName}.xlsx`;
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href);
    document.body.removeChild(elink);
  } else {
    navigator.msSaveBlob(blob, `${fileName}.xlsx`);
  }
};
// 安防设备详情
const getDevicestatusInfo = async () => {
  const res = await getDevicestatus();
  if (res.data.code == 0) {
    const data = res.data.data;
    stateData.safetyList1[0].num = data.video;
    stateData.safetyList1[1].num = Math.round(
      (data.video / (data.video + data.videooff)) * 100
    );
    stateData.safetyList1[2].num = data.videooff;

    stateData.safetyList2[0].num = data.entrance;
    stateData.safetyList2[1].num = Math.round(
      (data.entrance / (data.entrance + data.entranceoff)) * 100
    );
    stateData.safetyList2[2].num = data.entranceoff;
  }
  // const data = {
  //   total: 1200,
  //   video: 1056,
  //   entrance: 144,
  //   videooff: 39,
  //   entranceoff: 1,
  // };
};
// 创建会议弹框按钮
const createMeeting = async () => {
  const data = {
    room: sizeForm.room,
    subject: sizeForm.subject,
    start: dateFun(sizeForm.date[0]),
    end: dateFun(sizeForm.date[1]),
  };
  // console.log("data", data);
  const res = await setCreatemeeting(data);
  if (res.data.code == 0) {
    ElMessage({
      message: "创建成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "创建失败",
      type: "warning",
    });
  }
};
const dateFun = (val) => {
  if (val) {
    const date = new Date(val);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    const hour = String(date.getHours()).padStart(2, "0");
    const minute = String(date.getMinutes()).padStart(2, "0");
    const second = String(date.getSeconds()).padStart(2, "0");
    const dateStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    return dateStr;
  }
};
let meetingInfo = reactive([]);
const getmeetingroomInfo = async () => {
  const res = await getmeetingroom();
  if (res.data.code == 0) {
    const { rooms } = res.data.result;
    meetingInfo = rooms;
  }
};
// 会议信息列表
let meetingList = reactive([]);
flagStr.mySwiperRight?.autoplay.stop();
meetingList = [];
flagStr.mySwiperRight = null;
const getMeetinglistInfo = async () => {
  const res = await getMeetinglist(meetTime.value);
  if (res.data.code == 0) {
    meetingList = res.data.data;
    setTimeout(() => {
      SwiperInitRight();
    }, 1000);
  }
};

let isIfream = ref(false);
const ruleFormRef = ref();
const closeIfreamBox = () => {
  isIfream.value = false;
  sizeForm.date = [];
  sizeForm.subject = "";
  sizeForm.room = "";
};
</script>

<style lang="scss" scoped>
@import "@/assets/tea.scss";
::v-deep .el-input__wrapper {
  box-shadow: 0 0 0 1px #053fc6 inset;
  background: #040a4e;
}
::v-deep .el-textarea__inner {
  background-color: #040a4e !important;
  box-shadow: 0 0 0 1px #053fc6 inset !important;
}
::v-deep .el-input__count {
  background-color: #040a4e !important;
}
::v-deep .el-select__wrapper {
  border-radius: 4px;
  background-color: #040a4e !important;
  box-shadow: 0 0 0 1px #053fc6 inset !important;
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-input__inner {
  color: #cfc8c8;
}
::v-deep .el-textarea__inner {
  color: #cfc8c8;
}
::v-deep .el-range-separator {
  color: #cfc8c8;
}
::v-deep .el-range-input {
  color: #cfc8c8;
}
::v-deep .el-select__placeholder.is-transparent {
  color: #cfc8c8;
}
</style>
